<template>
  <el-card>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0; z-index: 100"
      @click="deletePanelItem"
    />
    <el-row :gutter="16">
      <el-col :span="5">
        <div class="statistic-card">
          <el-statistic>
            <template #title>
              <div style="display: inline-flex; align-items: center">
                班组名称
              </div>
            </template>
            <template #prefix>
              <div>{{ outputValue }}</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="statistic-card">
          <el-statistic>
            <template #title>
              <div style="display: inline-flex; align-items: center">
                班长
                <el-tooltip
                  effect="dark"
                  content="当天值班负责人"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12" color="#67c23a">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
            <template #prefix>
              <div>{{ outputValue1 }}</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="statistic-card">
          <el-statistic title="New transactions today">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                排班类型
              </div>
            </template>
            <template #prefix>
              <div>{{ outputValue2 }}</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="statistic-card">
          <el-statistic title="New transactions today">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                排班时间
                <el-tooltip
                  effect="dark"
                  content="开始时间至结束时间"
                  placement="top"
                >
                  <el-icon
                    style="margin-left: 4px"
                    :size="12"
                    color="rgb(255,171,45)"
                  >
                    <Calendar />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
            <template #prefix>
              <div style="font-family: DINLight">{{ outputValue3 }}</div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { Warning, Calendar } from "@element-plus/icons-vue";
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const outputValue = ref("1工段 一班组");

const outputValue1 = ref("程心文");

const outputValue2 = ref("大班-白班");

const outputValue3 = ref("2023-12-22 07:30  至  2023-12-23 19:30");
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../../../../assets/images/headbanner.png);
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}

:deep(.el-card__body) {
  flex: auto;
  padding: 0 !important;
}
.el-statistic {
  --el-statistic-content-font-size: 22px;
}

:deep(.statistic-card) {
  height: 100%;
  padding: 10px;
  border-radius: 4px;
  .el-statistic__content {
    line-height: 25px;
  }
  .el-statistic__head {
    color: aliceblue;
    margin-bottom: 0px;
  }
  .el-statistic__number {
    display: none;
  }
  .el-statistic__prefix {
    color: #fff;
    font-size: 14px;
  }
}
</style>
